<template>
  <div>
    <el-card class="box-card" style="height:800px">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
        <el-button size="small" style="float: right;" type="primary" @click="addPermiss">添加</el-button>
      </div>
      <el-scrollbar class="page-component__scroll" style="height:100%">
        <div style="height:700px;">
          <el-table
            :header-cell-style="{background:'#f5f5f5'}"
            class="perTabSty"
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            border
            height="680px"
          >
            <el-table-column align="center" prop="groupId" label="id" width="120px"></el-table-column>
            <el-table-column align="center" prop="groupName" label="群组名称" width="300"></el-table-column>
            <el-table-column align="center" prop="permissions" label="权限" show-overflow-tooltip>
              <template slot-scope="s">
                <el-tag
                  v-for="item in s.row.permissions"
                  style="margin: 5px"
                  :key="item.permissionId"
                >{{item.permissionName}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
              <template slot-scope="scope">
                <el-button @click="editPermiss(scope.row)" type="text">编辑</el-button>
                <el-button @click="removePermiss(scope.row)" type="text">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-scrollbar>
      <!-- 弹框 -->
      <el-dialog
        style="width:56%;margin-left:22%"
        title="群组管理配置"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
        @closed="closeDialog"
      >
        <el-form label-width="95px" :model="dutyFrom" :hide-required-asterisk="false">
          <el-form-item prop="groupName">
            <el-input
              class="userIntSize"
              v-model="dutyFrom.groupName"
              clearable
              placeholder="请输入群组名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-tree
              ref="authTree"
              :data="userAuth"
              show-checkbox
              node-key="permissionId"
              :props="defaultProps"
            ></el-tree>
          </el-form-item>
          <el-form-item>
            <el-button class="saveBtn" type="primary" @click="submitForm">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      // 弹框显示隐藏
      dialogFormVisible: false,
      // 表单数据
      dutyFrom: {
        groupId: "",
        groupName: "",
        permissionIds: "",
        permissions: [],
      },
      userAuth: [],
      defaultProps: {
        children: "childrens",
        label: "permissionName",
      },
    };
  },
  mounted() {
    this.getTabData();
  },
  methods: {
    //   获取表格数据
    getTabData() {
      this.$axios
        .post("group/getList")
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取群组列表
    getGroupList() {
      this.$axios
        .post("permission/getList", 2)
        .then((res) => {
          if (res.code == 200) {
            this.userAuth = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 添加权限
    addPermiss() {
      this.dialogFormVisible = true;
      this.getGroupList();
    },
    // 编辑权限
    editPermiss(row) {
      this.getGroupList();
      this.dialogFormVisible = true;
      this.$axios
        .post("group/load", { groupId: row.groupId }, 2)
        .then((res) => {
          if (res.code == 200) {
            this.dutyFrom = res.data;
            if (res.data.permissionIds) {
              let strObj = res.data.permissionIds.split(",");
              for (let i = 0; i < strObj.length; i++) {
                strObj[i] = Number(strObj[i]);
              }
              this.$refs.authTree.setCheckedKeys(strObj);
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 删除权限
    removePermiss(row) {
      this.$confirm("确认删除？")
        .then((_) => {
          this.$axios
            .post("group/remove", { groupId: row.groupId }, 2)
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
                this.getTabData();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((_) => {});
    },
    // 新增权限
    addPerFun(data) {
      this.$axios
        .post("group/add", data)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.getTabData();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 修改权限
    updataPer(data) {
      this.$axios
        .post("group/update", data, 2)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.getTabData();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 保存
    submitForm() {
      let list = [];
      let getCheckedNodes = this.$refs.authTree.getCheckedNodes();
      let getHalfCheckedNodes = this.$refs.authTree.getHalfCheckedNodes();
      let treeChecked = [...getCheckedNodes, ...getHalfCheckedNodes];
      if (treeChecked.length > 0) {
        treeChecked.forEach((item) => {
          list.push(item.permissionId);
        });
      }
      let obj = {
        groupName: this.dutyFrom.groupName,
        permissionIds: list.join(","),
      };
      if (this.dutyFrom.groupId) {
        obj.groupId = this.dutyFrom.groupId;
        this.updataPer(obj);
      } else {
        this.addPerFun(obj);
      }
      this.dialogFormVisible = false;
    },
    // 关闭弹框
    closeDialog() {
      this.dutyFrom = {
        groupId: "",
        groupName: "",
        permissionIds: "",
        permissions: [],
      };
      this.$refs.authTree.setCheckedKeys([]);
    },
  },
};
</script>
<style scoped>
.userIntSize {
  width: 80%;
}
.saveBtn {
  width: 55%;
  margin-left: 12%;
}
</style>
<style>
.perTabSty .el-table__row:hover > td {
  background: #e9eeff !important;
}
</style>